<template>
	<div class="audio-player">
		<!-- 播放按钮 -->
		<t-button @click="togglePlay" style="border-radius: 50%; width: 20px; height: 20px; padding: 12px">
			<t-icon :name="isPlaying ? 'pause' : 'play'" />
		</t-button>

		<!-- 当前时间 / 总时长 -->
		<span class="time">{{ formatTime(currentTime) }}/{{ formatTime(duration) }}</span>

		<!-- 进度条 -->
		<t-slider v-model="seekValue" :max="duration" step="0.1" @change="seekAudio" style="margin-left: 20px" />

		<!-- 倍速按钮 -->
		<t-button @click="togglePlaybackRateMenu" variant="text">倍速</t-button>

		<!-- 下载按钮 -->
		<t-button @click="downloadAudio" variant="text">
			<t-icon name="download" />
		</t-button>

		<!-- 倍速选择菜单 -->
		<t-popup v-if="showPlaybackRateMenu" placement="bottom" :attach="() => $refs.rateButton" @visible-change="togglePlaybackRateMenu">
			<div class="playback-rate-menu">
				<t-button v-for="rate in playbackRates" :key="rate" @click="setPlaybackRate(rate)" variant="text">{{ rate }}x</t-button>
			</div>
		</t-popup>
	</div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { Howl } from 'howler';

export default {
	setup() {
		const src = '你的音频文件路径.mp3';
		const isPlaying = ref(false);
		const currentTime = ref(0);
		const duration = ref(0);
		const seekValue = ref(0);
		const sound = ref(null);
		const showPlaybackRateMenu = ref(false);
		const playbackRates = ref([0.5, 1, 1.5, 2]);

		// 切换播放与暂停
		const togglePlay = () => {
			if (isPlaying.value) {
				sound.value.pause();
			} else {
				sound.value.play();
			}
			isPlaying.value = !isPlaying.value;
		};

		// 设置倍速
		const setPlaybackRate = (rate) => {
			sound.value.rate(rate);
			showPlaybackRateMenu.value = false;
		};

		// 切换倍速菜单显示
		const togglePlaybackRateMenu = () => {
			showPlaybackRateMenu.value = !showPlaybackRateMenu.value;
		};

		// 更新播放进度
		const updateProgress = () => {
			currentTime.value = sound.value.seek();
			seekValue.value = currentTime.value;
			if (sound.value.playing()) {
				requestAnimationFrame(updateProgress);
			}
		};

		// 拖动进度条调整播放进度
		const seekAudio = () => {
			sound.value.seek(seekValue.value);
			currentTime.value = seekValue.value;
		};

		// 下载音频文件
		const downloadAudio = () => {
			const link = document.createElement('a');
			link.href = src;
			link.download = '音频文件.mp3';
			link.click();
		};

		// 格式化时间
		const formatTime = (time) => {
			const minutes = Math.floor(time / 60);
			const seconds = Math.floor(time % 60);
			return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
		};

		onMounted(() => {
			sound.value = new Howl({
				src: [src],
				html5: true,
				onload: () => {
					duration.value = sound.value.duration();
				},
				onplay: updateProgress
			});
		});

		return {
			togglePlay,
			setPlaybackRate,
			togglePlaybackRateMenu,
			downloadAudio,
			seekAudio,
			isPlaying,
			currentTime,
			duration,
			seekValue,
			showPlaybackRateMenu,
			playbackRates,
			formatTime
		};
	}
};
</script>

<style scoped>
.audio-player {
	display: flex;
	align-items: center;
	gap: 10px;
}

.time {
	width: 60px;
	text-align: center;
}

.playback-rate-menu {
	display: flex;
	flex-direction: column;
	padding: 5px;
}
</style>
